<template>
  <smart-page>
    <template #actions>
<!--      <a-button  :disabled="selectedKeys.length === 0" @click="onDelete()">批量删除</a-button>-->
      <a-button v-auth="Acl.UNION_MALL_ORDER_REPLENISH_EXPRESS" type="primary" @click="editCtr.open()">导出待发货订单</a-button>
    </template>
    <template #search>
      <smart-search :query-array="ORDER_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="ORDER_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange">

      <template #postFee="{ record }">
        <a-link status="danger">{{ record.postFee * 0.01 }}元</a-link>
      </template>

      <template #address="{ record }">
        <div v-if="record.address" class="item">

          <a-link status="normal">{{ record.address.name }} ( {{ record.address.mobile }} )</a-link>
          <a-link status="normal">{{ record.address.fullAddress }}</a-link>
        </div>
      </template>
      <template #express="{ record }">
        <div class="item">
          <a-link>{{ record.expressName }}</a-link>
          <a-link status="danger"> {{ record.expressCode }}</a-link>
        </div>
      </template>
      <template #time="{ record }">
        <div class="item">
          <a-link status="normal">下单: {{ record.submitTime }}</a-link>
          <a-link status="danger">发货: {{ record.sendTime }}</a-link>
        </div>
      </template>


      <template #action="{ record }">


          <a-link v-auth="Acl.UNION_MALL_ORDER_REPLENISH_EXPRESS" @click="editCtr.open(record)"> 发货</a-link>

      </template>
    </a-table>

    <SendWindow  v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
  </smart-page>
</template>
<script lang="ts" setup>
import {onMounted} from 'vue';

import {ORDER_SEARCH} from '../resource/search'
import {ORDER_COLUMNS} from "../resource/colums";
import {TablePage} from "@/libs/core";
import {UnionMallHttp} from "../resource/http";
import  SendWindow from  './send.vue'
import {Acl} from "@/libs/acl";

const pageConfig = {title: '兑换订单', rowKey: 'id', nameKey: null,}
const {getOrderPage} = UnionMallHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getOrderPage).setPermission(Acl.UNION_MALL_ORDER_PAGE_LIST);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys  , editCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onDelete, onSearch} = tablePage
onMounted(() => onFetch())
</script>


<style lang="less" scoped>

.item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  :deep(.arco-link) {
    width: 100%;
    text-align: left;
    line-height: 1.5;
    font-size: 13px;
    justify-content: start;
  }
}


</style>